[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" isEdit="true" import CloudHeader from "@/cloud-header" export default function Home() { return (

Cloud Solutions for Modern Enterprises

Our MCP protocol implementation provides unparalleled security and performance for your cloud infrastructure.

{/* Additional content would go here */}

) } [V0_FILE]typescriptreact:file="cloud-header.tsx" isEdit="true" isQuickEdit="true" "use client" import { useEffect, useRef } from "react" import Link from "next/link" // Simple noise function for organic movement function noise(x: number, y: number, z: number): number { const X = Math.floor(x) & 255 const Y = Math.floor(y) & 255 const Z = Math.floor(z) & 255 x -= Math.floor(x) y -= Math.floor(y) z -= Math.floor(z) const u = fade(x) const v = fade(y) const w = fade(z) const A = p[X] + Y, AA = p[A] + Z, AB = p[A + 1] + Z const B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z return lerp( w, lerp( v, lerp(u, grad(p[AA], x, y, z), grad(p[BA], x - 1, y, z)), lerp(u, grad(p[AB], x, y - 1, z), grad(p[BB], x - 1, y - 1, z)), ), lerp( v, lerp(u, grad(p[AA + 1], x, y, z - 1), grad(p[BA + 1], x - 1, y, z - 1)), lerp(u, grad(p[AB + 1], x, y - 1, z - 1), grad(p[BB + 1], x - 1, y - 1, z - 1)), ), ) } function fade(t: number): number { return t * t * t * (t * (t * 6 - 15) + 10) } function lerp(t: number, a: number, b: number): number { return a + t * (b - a) } function grad(hash: number, x: number, y: number, z: number): number { const h = hash & 15 const u = h < 8 ? x : y const v = h < 4 ? y : h === 12 || h === 14 ? x : z return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v) } // Permutation table const p = Array(512) for (let i = 0; i < 256; i++) p[i] = p[i + 256] = Math.floor(Math.random() * 256) export default function CloudHeader() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas dimensions to match window size const resizeCanvas = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resizeCanvas() window.addEventListener("resize", resizeCanvas) // Colors for the gradient const colors = [ { r: 148, g: 0, b: 211 }, // Violet { r: 75, g: 0, b: 130 }, // Indigo { r: 0, g: 0, b: 255 }, // Blue { r: 255, g: 255, b: 0 }, // Yellow ] // Animation variables let time = 0 const bandWidth = Math.min(canvas.width, canvas.height) * 0.7 // 70% of the smaller dimension // Create gradient for the flowing band const createBandGradient = (ctx: CanvasRenderingContext2D, points: { x: number; y: number }[]) => { // Create gradient along the path const gradient = ctx.createLinearGradient( points[0].x, points[0].y, points[points.length - 1].x, points[points.length - 1].y, ) // Add color stops gradient.addColorStop(0, `rgba(${colors[0].r}, ${colors[0].g}, ${colors[0].b}, 0.9)`) gradient.addColorStop(0.3, `rgba(${colors[1].r}, ${colors[1].g}, ${colors[1].b}, 0.9)`) gradient.addColorStop(0.6, `rgba(${colors[2].r}, ${colors[2].g}, ${colors[2].b}, 0.9)`) gradient.addColorStop(1, `rgba(${colors[3].r}, ${colors[3].g}, ${colors[3].b}, 0.9)`) return gradient } // Draw the flowing band const drawFlowingBand = (time: number) => { // Clear canvas ctx.fillStyle = "rgba(0, 0, 0, 0.1)" ctx.fillRect(0, 0, canvas.width, canvas.height) // Calculate diagonal path with organic movement const numPoints = 20 const points: { x: number; y: number }[] = [] // Create points along the diagonal with noise-based displacement for (let i = 0; i < numPoints; i++) { const t = i / (numPoints - 1) // Base diagonal line from top-left to bottom-right let x = t * canvas.width let y = t * canvas.height // Apply noise-based displacement for organic movement const noiseScale = 0.003 const displacementScale = bandWidth * 0.15 const noiseValue = noise(x * noiseScale, y * noiseScale, time * 0.2) const displacement = (noiseValue * 2 - 1) * displacementScale // Calculate perpendicular direction to the diagonal const perpX = -1 const perpY = 1 const perpLength = Math.sqrt(perpX * perpX + perpY * perpY) // Apply displacement perpendicular to the diagonal x += (perpX / perpLength) * displacement y += (perpY / perpLength) * displacement points.push({ x, y }) } // Draw the band with gradient ctx.save() ctx.globalCompositeOperation = "screen" // Create gradient const gradient = createBandGradient(ctx, points) // Draw the band as a series of quadratic curves ctx.beginPath() // Top edge of the band ctx.moveTo(points[0].x - bandWidth / 2, points[0].y - bandWidth / 2) for (let i = 1; i < points.length - 1; i++) { const xc = (points[i].x + points[i + 1].x) / 2 const yc = (points[i].y + points[i + 1].y) / 2 // Calculate perpendicular offset for band width const dx = points[i + 1].x - points[i - 1].x const dy = points[i + 1].y - points[i - 1].y const length = Math.sqrt(dx * dx + dy * dy) const offsetX = ((-dy / length) * bandWidth) / 2 const offsetY = ((dx / length) * bandWidth) / 2 ctx.quadraticCurveTo(points[i].x + offsetX, points[i].y + offsetY, xc + offsetX, yc + offsetY) } // Connect to the last point ctx.lineTo(points[points.length - 1].x + bandWidth / 2, points[points.length - 1].y - bandWidth / 2) // Bottom edge of the band (in reverse) for (let i = points.length - 2; i > 0; i--) { const xc = (points[i].x + points[i - 1].x) / 2 const yc = (points[i].y + points[i - 1].y) / 2 // Calculate perpendicular offset for band width const dx = points[i - 1].x - points[i + 1].x const dy = points[i - 1].y - points[i + 1].y const length = Math.sqrt(dx * dx + dy * dy) const offsetX = ((-dy / length) * bandWidth) / 2 const offsetY = ((dx / length) * bandWidth) / 2 ctx.quadraticCurveTo(points[i].x - offsetX, points[i].y - offsetY, xc - offsetX, yc - offsetY) } ctx.closePath() ctx.fillStyle = gradient ctx.fill() // Add inner glow effect ctx.shadowColor = "rgba(255, 255, 255, 0.3)" ctx.shadowBlur = 20 ctx.strokeStyle = gradient ctx.lineWidth = 2 ctx.stroke() // Add some flowing particles along the band for extra dynamism for (let i = 1; i < points.length - 1; i++) { // Add multiple particles per point for (let j = 0; j < 3; j++) { const tOffset = j * 0.01 const t = i / (points.length - 1) + tOffset // Oscillating size based on time and position const particleSize = 2 + Math.sin(time * 2 + t * 10) * 1.5 // Perpendicular offset for particle position - keep closer to center const dx = points[i + 1].x - points[i - 1].x const dy = points[i + 1].y - points[i - 1].y const length = Math.sqrt(dx * dx + dy * dy) // Reduced offset factor to keep particles closer to the diagonal const offsetFactor = Math.sin(time * 3 + t * 15) * 0.4 const offsetX = (-dy / length) * bandWidth * offsetFactor const offsetY = (dx / length) * bandWidth * offsetFactor // Draw particle ctx.beginPath() ctx.arc(points[i].x + offsetX, points[i].y + offsetY, particleSize, 0, Math.PI * 2) // Get color from gradient position const colorIndex = Math.floor(t * (colors.length - 1)) const nextColorIndex = Math.min(colorIndex + 1, colors.length - 1) const colorRatio = t * (colors.length - 1) - colorIndex const r = Math.floor(colors[colorIndex].r * (1 - colorRatio) + colors[nextColorIndex].r * colorRatio) const g = Math.floor(colors[colorIndex].g * (1 - colorRatio) + colors[nextColorIndex].g * colorRatio) const b = Math.floor(colors[colorIndex].b * (1 - colorRatio) + colors[nextColorIndex].g * colorRatio) ctx.fillStyle = `rgba(${r}, ${g}, ${b}, 0.8)` ctx.fill() } } ctx.restore() // Apply subtle blur for water-like effect ctx.filter = "blur(3px)" ctx.globalAlpha = 0.3 ctx.drawImage(canvas, 0, 0) ctx.globalAlpha = 1.0 ctx.filter = "none" } // Animation loop const animate = () => { time += 0.01 drawFlowingBand(time) requestAnimationFrame(animate) } // Start animation animate() return () => { window.removeEventListener("resize", resizeCanvas) } }, []) return (

{/* Canvas background */}

) }

About

Tags

Share

About

Tags

Share

More from nmonto

More Templates Like This